<template>
  <div class="home-header">
    <div class="home-left">
      <span class="iconfont back-icon">&#xe624;</span>
    </div>
    <div class="home-body">
      <span class="iconfont">&#xe632;</span>
      输入城市/游玩/景点</div>
    <div class="home-right">
      城市
      <span class="iconfont arrow-icon">
        &#xe64a;
      </span>
    </div>
  </div>
</template>

<script>
export default {
  name: "HomeHeader"
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="stylus">
  @import "./../assets/styles/varibles.styl"
.home-header
  line-height: 0.86rem
  display: flex
  background: $bgColor
  color #fff
  .home-left
    width:.64rem
    float left
    .back-icon
     text-align center
     font-size:.4rem
  .home-body
    flex 1
    height: .64 rem
    line-height: .64rem
    margin-top: .12rem
    margin-left: .2rem
    background: #ffffff
    border-radius .1rem
    color #ccc
  .home-right
   width: 1.24rem
   float right
   text-align center
   .arrow-icon
      margin-left -.04rem
      font-size .24rem
</style>
